<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
  <link rel="stylesheet" href="../../styles/common.css"/>
  <link rel="stylesheet" href="../../styles/page.css"/>
  <style>
    .search-btn {
      margin-left: 20px;
    }
    .tableBar{
      justify-content: flex-start !important;
    }
  </style>
</head>
<body>
<div id="app"class="dashboard-container" v-loading="loading">
  <div class="container">
    <!-- 搜索项 -->
    <div class="tableBar">
      订单日期
      <el-date-picker v-model="orderTime"
                      clearable
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetimerange"
                      placeholder="选择日期"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']"
                      style="width: 400px;margin-left: 20px;"
      ></el-date-picker>
      <el-button type="primary" class="search-btn" @click="getData">查询</el-button>
    </div>

    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1000px;height:500px;margin-top: 30px;text-align: center;"></div>
  </div>
</div>

<script src="../../js/echarts.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      reportData: [],
      orderTime: '',
      beginTime: '',
      endTime: '',
      loading: false
    },
    watch:{
      orderTime (val) {
        if (val && val.length >= 2) {
          this.beginTime = val[0]
          this.endTime = val[1]
        } else {
          this.beginTime = ''
          this.endTime = ''
        }
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      async getData() {
        axios({
          method: "get",
          url: "/report/setmeal",
          params:{
            beginTime: this.beginTime || undefined ,
            endTime: this.endTime || undefined
          }
        }).then(resp => {
          this.reportData = resp.data.data;
          this.drawLine();
        })
      },
      drawLine() {

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
          title: { //标题
            text: '套餐统计',
            left: 'center'
          },
          legend: {
            top: 'bottom'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: true,
                formatter: '{b}:{c}份',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              data: this.reportData
            }
          ]
        });
      }
    }
  })
</script>
</body>
</html>